<template>
  <div class="relative w-full h-full page">
    <PageHeader :title="$t('categoryManagement.title')" />
    <!-- <div class="flex_aic_jcsb">
      <div class="flex_aic">
        <el-input
          v-model="filters.searchKey"
          :placeholder="$t('categoryManagement.categoryName')"
          style="width: 280px"
          class="ml12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('categoryManagement.categoryName') }}</span>
          </template>
        </el-input>
      </div>
      <div class="flex_aic">
        <el-button @click="restSearch">{{ $t('common.reset') }}</el-button>
        <el-button type="primary" @click="getDataList">{{ $t('common.search') }}</el-button>
      </div>
    </div> -->
    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'skuClassify:add'">
      <div class="addBtn flex_aic_jcc" @click="handOpenEditDia('add')">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('categoryManagement.addCategory') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :default-expand-all="false"
      height="calc(100vh - 200px)"
      class="cover-table mt12"
      v-loading="loading"
    >
      <el-table-column prop="name" :label="$t('categoryManagement.categoryName')">
        <template #default="{ row }">
          {{ row["name" + locale] }}
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('categoryManagement.categoryImage')">
        <template #default="{ row }">
          <el-image
            v-if="row.iconUrl"
            style="width: 60px; height: 60px"
            :src="row.iconUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sort" :label="$t('categoryManagement.sort')" />
      <el-table-column prop="address" :label="$t('categoryManagement.operation')" width="360px">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              @click="handOpenEditDia('edit', scope.row)"
              v-my-point="'skuClassify:edit'"
              >{{ $t('categoryManagement.edit') }}</el-button
            >
            <el-button
              type="text"
              @click="handOpenEditDia('addchild', scope.row)"
              v-my-point="'skuClassify:add'"
              >{{ $t('categoryManagement.addSubCategory') }}</el-button
            >
            <el-popconfirm
              :title="$t('categoryManagement.confirmDelete')"
              @confirm="handleDelete(scope.row)"
              :confirm-button-text="$t('categoryManagement.confirm')"
              :cancel-button-text="$t('categoryManagement.cancel')"
              width="260px"
            >
              <template #reference>
                <el-button
                  class="ml0"
                  type="text"
                  size="small"
                  v-my-point="'skuClassify:del'"
                  >{{ $t('categoryManagement.delete') }}</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <EditDia
      v-model="editDiaVisible"
      :data="editDiaData"
      @success="getDataList"
      :operationType="operationType"
    ></EditDia>
  </div>
</template>

<script setup>
import { ref, watchEffect, watchPostEffect, onMounted } from "vue";
import EditDia from "./editDia.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const filters = ref({
  searchKey: "",
});

const loading = ref(false);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const tableData = ref([]);
const operationType = ref("add"); // add 新增 edit 编辑 addchild 新增子分类
const handleDelete = (row) => {
  Api.deleteBusinessCategory([row.id])
    .then((res) => {
      if (res.status === 200) {
        ElMessage.success(t('categoryManagement.operationSuccess'));
        getDataList();
      }
    })
    .catch((err) => {
      console.error("删除失败", err);
      ElMessage.error(t('categoryManagement.deleteFailed'));
    });
};
const restSearch = () => {
  filters.value.searchKey = "";
  getDataList();
};
const getDataList = () => {
  loading.value = true;
  Api.getSkuClassify({
    page: 0,
    size: 999,
    name: filters.value.searchKey,
    parentId: 0,
  })
    .then((res) => {
      tableData.value = res.data.content || [];
    })
    .finally(() => {
      loading.value = false;
    });
};

const handOpenEditDia = (type, row) => {
  operationType.value = type;
  editDiaVisible.value = true;
  editDiaData.value = row && JSON.parse(JSON.stringify(row));
  if (type == "addchild") {
    editDiaData.value.iconUrl = "";
    editDiaData.value.sort = 0;
  }
};

onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}

.page {
  .cover-table {
    :deep(.el-table__cell) {
      text-align: left;
    }
  }
}
</style>
